<template>
  <div class="yxp word-list" @click="handlePop">
    <div class="yxp-wordList-top">
      <div class="back" id="yxp-paper-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">单词识记</div>
      <div class="yxp-top-r" id="yxp-paper-end" @click="handleEnd"><img src="@/assets/word/memory-icon.png" />结束识记</div>
    </div>
    <div class="yxp-momery-main">
      <div
        class="yxp-momery-item"
        v-for="(item, i) in dataList"
        :key="item.id"
        :data-i="item.isOrder"
        :class="{ active: (item.num > 0 && curIndex === i) || item.isOrder }"
        @click.stop="handlePlay(item, i)"
      >
        <div class="yxp-momery-item-l">
          <span>{{ item.word }}</span>
        </div>
        <div class="yxp-momery-item-r">
          <span class="word-zh" v-if="item.num === 2 && curIndex === i">{{
            item.translate
          }}</span>
        </div>
        <div class="yxp-momery-detail" @click.stop="handleHelp(item, i)">
          <div class="dot">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="word-detail-item" v-if="item.isShow">
            <span @click.stop="handleTranslate(item, i)">详解</span>
            <span
              v-if="userInfo.is_show_vedio === 1"
              @click.stop="handleVideo(item, i)"
              >助记</span
            >
          </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
    <div class="yxp-memory-page" v-if="!isNone">
        <div class="yxp-memory-page-item">
          <div class="page-list">
            <div class="prev" id="yxp-paper-prev" @click="handlePage(0)" v-if="pageIndex > 1"></div>
            <span class="page">{{pageIndex}}/{{page}}</span>
            <div class="next" id="yxp-paper-next" @click="handlePage(1)" v-if="userInfo.is_read_cut === 1"></div>
            <div class="curl" id="yxp-paper-curl" @click="handlePage(1)" v-if="userInfo.is_read_cut === 0 && pageIndex < page"></div>
          </div>
          <div class="audio-icon" @click="handleOrderPlay"></div>
        </div>
    </div>
    <div class="yxp-memory-pop" v-if="isShow">
      <img src="@/assets/word/paper-pop.png" class="paper"/>
      <p class="tips" v-if="!isPage && page > 1 && pageIndex < page">学完第{{pageIndex + 1}}组啦!快去场景迁移剪词条吧~</p>
      <p class="tips" v-if="page === 1 && !isLast">学完第{{pageIndex}}组啦!快去场景迁移剪词条吧~</p>
      <p class="tips" v-if="isPage && page > 1 && pageIndex < page">学完第{{pageIndex - 1}}组啦!快去场景迁移剪词条吧~</p>
      <p class="tips" v-if="isLast && page === pageIndex">学完第{{pageIndex}}组啦!快去场景迁移剪词条吧~</p>
      <p class="tips" v-if="!isLast && page === pageIndex">学完第{{pageIndex - 1}}组啦!快去场景迁移剪词条吧~</p>
      <div class="btn" id="yxp-paper-btn" @click="handlePaper">开始剪纸条</div>
    </div> 
    <Translates
      :isDetail="isDetail"
      :word="word"
      v-if="word !== ''"
      @translate="handleChange"
    />
    <div class="word-video-pop" v-if="isVideo">
      <div class="word-video-pop-mark">
        <img
          src="@/assets/word/close-icon.png"
          class="close"
          id="yxp-re-close"
          @click="isVideo = false"
        />
      </div>
      <video
        :src="videoSrc"
        controls="controls"
        controlsList="nodownload"
        autoplay
      />
    </div>
    <audio ref="audio"></audio>
    <div
      class="mark"
      v-if="isEnd || isBack || isShow || isDetail || isVideo"
    ></div>
    <div class="yxp-wordList-pop" v-if="isEnd">
      <div class="close" @click="isEnd = false"></div>
      <!-- <img src="@/assets/word/close-icon.png" class="close"/> -->
      <p class="tips">{{ tips }}</p>
      <div class="btn">
        <span class="btn-item" id="yxp-tips-sure" @click="handleSure(0)">确定</span>
        <span class="btn-item" id="yxp-tips-reset" @click="isEnd = false">取消</span>
      </div>
    </div>
    <div class="yxp-wordList-pop" v-if="isBack">
      <div class="close" @click="isBack = false"></div>
      <!-- <img src="@/assets/word/close-icon.png" class="close" @click="isBack = false"/> -->
      <p class="tips">是否放弃识记单词</p>
      <div class="btn">
        <span class="btn-item" id="yxp-re-sure" @click="handleSure(1)">确定</span>
        <span class="btn-item" id="yxp-re-reset" @click="isBack = false">取消</span>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import storage from "@/utils/storage.js";
import Empty from "@/components/Empty.vue";
import Translates from "@/components/Translates.vue";
import Timetips from "@/components/Timetips";
import { wordVideo } from "@/services/word.js";
export default {
  name: "wordMemory",
  components: {
    Empty,
    Translates,
    Timetips
  },
  data() {
    return {
      curIndex: 0,
      isShow: false,
      isBack: false,
      pageIndex: 1,
      page: 0,
      dataList: [],
      canArr: [],
      submitArr: [],
      audioNum: 0, // 小喇叭播放
      isOrder: true,
      translates: "",
      isDetail: false,
      isVideo: false,
      isEnd: false, // 结束识记pop
      tips: "", // 结束识记text
      videoSrc: "", //助记视频
      wordData: [],
      ispage: true,
      userInfo: {},
      isNone: false,
      word: "",
      course_type: 0,
      package_id: 0,
      height: 0,
      isPage: 1,
      isLast: false
    };
  },
  created () {
    if (this.$route.query.page) {
      this.pageIndex = +this.$route.query.page
    }
    let initData = storage.get('paperData')
    this.page = initData.length
    let data = initData[this.pageIndex - 1]
    if (data.data.length === 0) {
      this.isNone = true
    }
    if (!this.$route.query.page) {
      data.data.map(item => {
        item.num = 0
        item.isShow = false
        item.isOrder = false,
        item.isStudy = false
      })
    } else {
      data.data.map(item => {
        item.num = 0
        item.isShow = false
        item.isOrder = false
      })
    }
    let userInfo = storage.get('vuexStoragePad').userInfo
    this.userInfo = userInfo
    this.dataList = data.data
  },
  methods: {
    init () {
      let initData = storage.get('paperData')
      let data = initData[this.pageIndex - 1]
      data.data.map(item => {
        item.num = 0
        item.isShow = false
        item.isOrder = false
      })
      this.dataList = data.data
    },
    handlePage (type) {
      let initData = storage.get('paperData')
      this.isPage = type
      this.dataList.map(item => {
        item.isShow = false
        item.isOrder = false
        this.$set(item, 'num', 0)
      })
      this.isOrder = true
      this.audioNum = 0
      let res = this.dataList.filter(item => {
        return item.isStudy === true
      })
      if (res.length < this.dataList.length) {
        this.$toast('当前页还有部分单词没有进行识记不能进行提交')
        return
      }
      if (type === 0) {
        if (res.length === this.dataList.length) {
          if (!initData[this.pageIndex - 1].isEnd) {
           this.stopStudyWord(type)
          } else {
            this.isLast = false
            this.pageIndex--
            if (this.pageIndex < 1) {
              this.pageIndex = 1
              return
            }
            this.init()
          }
        }
        
      }  else {
        if (res.length === this.dataList.length) {
          // console.log(res.length + '都读了')
          if (!initData[this.pageIndex - 1].isEnd) {
            this.submitArr.push(this.pageIndex)
            this.stopStudyWord(type)
          } else {
            if (this.userInfo.is_read_cut === 1) {
              this.isShow = true
            }
            initData[this.pageIndex - 1].data = this.dataList
            initData[this.pageIndex - 1].isEnd = true
            storage.set('paperData',initData)
            this.pageIndex++
              if (this.pageIndex > this.page) {
                this.pageIndex = this.page
                this.isLast = true
                return
              }
              this.init()
          }
        }
      }
    },
    async stopStudyWord(type) {
      let initData = storage.get('paperData')
      this.canArr = [];
      if (this.userInfo.is_read_cut === 1) {
          this.isShow = true
        }
      initData[this.pageIndex - 1].data = this.dataList
      initData[this.pageIndex - 1].isEnd = true
      storage.set('paperData', initData)
        if (type === 0) {
          
          this.pageIndex--
          this.isLast = false
          if (this.pageIndex < 1) {
            this.pageIndex = 1
            this.isLast = false
            return
          }
        } else {
          this.pageIndex++
          if (this.pageIndex > this.page) {
            this.pageIndex = this.page
            this.isLast = true
            return
          }
        }
        this.init()
    },
    handleOrderPlay () {
      this.dataList.map(item => {
        item.isOrder = false
        item.isShow = false
        this.$set(item, 'num', 0)
      })
      let audio = this.$refs.audio
      console.log(this.audioNum + '***' + this.isOrder)
      let item = this.dataList[this.audioNum]
      this.$set(item, 'isOrder', true)
      this.$set(item, 'num', 1)
      console.log(this.dataList)
      audio.src = item.project_voice
      audio.play()
      if (this.isOrder) {
        this.audioNum++
        if (this.dataList.length === 1) {
          this.audioNum = 0
        }
        if (this.audioNum === this.dataList.length -1) {
          this.isOrder = false
          this.audioNum = this.dataList.length - 1
        }
      } else {
        this.audioNum--
        if (this.dataList.length === 1) {
          this.audioNum = 0
        }
        if (this.audioNum === 0) {
          this.isOrder = true
          this.audioNum = 0
        }
      }
      this.curIndex = this.audioNum
    },
    // 播放语音
    handlePlay (item, i) {
      this.dataList.map(item => {
        item.isOrder = false
        item.isShow = false
      })
      this.curIndex = i
      let num = item.num
      num++
      if (num > 2) {
        num = 1
      }
      this.$set(item, 'num', num)
      this.$set(item, 'isStudy', true)
      let audio = this.$refs.audio
      audio.src = item.project_voice
      audio.play()
      this.dataList.map((elem,index) => {
        if (index !== i) {
          this.$set(elem, 'num', 0)
        }
      })
      console.log(this.dataList)
    },
    // 结束识记
    async handleEnd() {
      let initData = storage.get('paperData')
      let res = this.dataList.filter(item => {
        return item.isStudy === true
      })
      if (res.length < this.dataList.length) {
        this.$toast('当前页还有部分单词没有进行识记不能进行提交')
        return
      }
      let updateData = initData[this.pageIndex - 1].data
      updateData.map(item => {
        this.canArr.push(item.id)
      })
      if (!initData[this.pageIndex - 1].isEnd) {
        this.submitArr.push(this.pageIndex)
        this.canArr = []
        this.isEnd = true
        initData[this.pageIndex - 1].isEnd = true
        storage.set('paperData', initData)
        let endNum = initData.filter(item => {
          return item.isEnd === true
        })
        if (endNum.length === initData.length) {
          this.tips = '是否结束识记'
        } else {
          this.tips = '还有部分单词没有识记完，是否结束识记'
        }        
      } else {
        this.isEnd = true
        let endNum = initData.filter(item => {
            return item.isEnd === true
          })
        if (endNum.length === initData.length) {
          this.tips = '是否结束识记'
        } else {
          this.tips = '还有部分单词没有识记完，是否结束识记'
        }
      }
      // if (this.submitArr.indexOf(this.pageIndex) === -1) {
      //   console.log(3434);
      //   this.submitArr.push(this.pageIndex);
      //   this.$loading.show();
      //   this.$loading.hide();
      //   this.isEnd = true;
      //   if (this.remArr.length === this.initData.length) {
      //     this.tips = "是否结束识记";
      //     window.localStorage.setItem(
      //       "afterWord",
      //       JSON.stringify(this.initData)
      //     );
      //   } else {
      //     this.tips = "还有部分单词没有识记完，是否结束识记";
      //     let data = this.initData.slice(
      //       0,
      //       this.pageSize * this.submitArr.length
      //     );
      //     window.localStorage.setItem("afterWord", JSON.stringify(data));
      //   }
      // } else {
      //   this.isEnd = true;
      //   if (this.remArr.length === this.initData.length) {
      //     this.tips = "是否结束识记";
      //     console.log(this.initData);
      //     window.localStorage.setItem(
      //       "afterWord",
      //       JSON.stringify(this.initData)
      //     );
      //   } else {
      //     this.tips = "还有部分单词没有识记完，是否结束识记";
      //     let data = this.initData.slice(
      //       0,
      //       this.pageSize * this.submitArr.length
      //     );
      //     window.localStorage.setItem("afterWord", JSON.stringify(data));
      //   }
      // }
    },
    async handleSure(type) {
      this.isBack = false;
      this.isEnd = false;
      this.submitArr = [];
      if (type === 0) {
        this.$router.replace({
          path: "/super-read/afterStudy",
          query: { ...this.$route.query },
        });
      } else {
        this.$router.go(-1)
        // let path = ''
        // let modal = +this.$route.query.modal
        // console.log(this.$route.query.modal + '咋俩')
        // if (modal === 1) {
        //   path = '/super-read/check-point'
        // } else if (modal === 2) {
        //   path = '/super-read/pushword'
        // } else if (modal === 3) {
        //   path = '/super-read/analysis'
        // }
        // console.log(path)
        // this.$router.push({
        //   path: path,
        //   query: { ...this.$route.query }
        // });
      }
    },
    // 助记
    handleHelp (item,i) {
      this.dataList.map(item => {
        item.isShow = false
      })
      let obj = this.dataList[i]
      this.$set(obj, 'isShow', true)
    },
    // 翻译
    handleTranslate(item) {
      this.$set(item, "isShow", false);
      this.isDetail = true;
      this.word = item.word;
    },
    // 助记视频
    async handleVideo(item) {
      this.$loading.show();
      this.$set(item, "isShow", false);
      let data = await wordVideo({ word: item.word });
      if (data.code === 1) {
        this.$loading.hide();
        if (data.data.url === "") {
          this.$toast("暂时没有助记视频哦~");
        } else {
          this.isVideo = true;
          this.videoSrc = data.data.url;
        }
      } else if (data.code === "10001" || data.code === 10001) {
        this.$loading.hide();
        this.$toast("token过期，请重新登录");
      } else {
        this.$loading.hide();
        this.$toast(data.info);
      }
    },
    handlePaper () {
      this.isShow = false
      let page = 1
      if (this.page === 1) {
        page = 1
      } else if (this.isLast) {
        page = this.page
      } else {
        page = this.isPage === 0 ? this.pageIndex + 1 : this.pageIndex - 1
      }
      this.$router.replace({
        path: '/super-read/simulatePaper',
        query: {
          page: page,
          isPage: this.isPage,
          ...this.$route.query,
        }
      })
    },
    handleBack() {
      this.isBack = true;
    },
    handleChange(val) {
      this.isDetail = val.isDetail;
      this.word = val.word;
    },
    handlePop() {
      this.dataList.map((item) => {
        this.$set(item, 'isShow', false)
      });
    },
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
.yxp-wordList-top {
  width: 100%;
  .yxp-top-r {
    position: absolute;
    right: 40px;
    top: 0;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #27BFA3;
    margin-right: 40px;
    cursor: pointer;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 22px;
      height: 22px;
      margin-right: 9px;
    }
  }
}
.yxp-momery-main {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 800px;
  height: calc(100vh - 190px);
  margin: 0 auto;
  margin-top: 30px;
  .active {
   .yxp-momery-item-l {
      font-size: 40px;
      font-weight: bold;
   }
   .yxp-momery-item-r {
      font-size: 24px;
      font-weight: 400;
   }
  }
  .active {
      .yxp-momery-item-l {
        span {
          font-weight: bold;
        }
      }
      .yxp-momery-item-r {
        font-size: 24px;
        font-weight: 400;
      }
    }
  .yxp-momery-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    height: calc((100vh - 290px) / 5);
    min-height: 50px;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto 20px;
    cursor: pointer;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }
    &-l {
      font-size: 36px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #011A06;
      padding-left: 40px;
    }
    &-r {
      position: relative;
      .word-zh {
        padding-right: 70px;
      }
    }
    .yxp-momery-detail {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 30px;
      z-index: 10;
      cursor: pointer;
      .dot {
        position: absolute;
        top: 15px;
        right: 5px;
        display: flex;
        justify-content: flex-start;
        cursor: pointer;
        span {
          display: block;
          width: 5px;
          height: 5px;
          background: #D0DAE3;
          border-radius: 50%;
          margin-right: 5px;
          cursor: pointer;
        }
      }
      .word-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 34px;
        transform: translateX(-50%);
        height: 56px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #3EB29D;
        box-shadow:0px 0px 5px rgba(12,59,19,0.1);
        border-radius: 10px;
        span {
          display: block;
          width: 80px;
          flex: 1;
          text-align: center;
          cursor: pointer;
          &:last-child {
            border-left: 1px solid #39A28F;
          }
        }
        &::before {
          display: block;
          content: '';
          position: absolute;
          left: 50%;
          top: -8px;
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #3EB29D;
          margin-left: -8px;
        }
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.yxp-memory-page {
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-end;
  align-self: flex-end;
  width: 100%;
  height: 80px;
  &-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: inherit;
    margin: 0 auto;
  }
  .page-list {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .prev,.next,.curl {
      width: 40px;
      height: 40px;
      cursor: pointer;
      &:hover {
        background-color: #e9f9f6;
        border-radius: 100%;
      }
    }
    .prev {
      background: url(../../../assets/word/prev.png) no-repeat;
      background-size: 40px 40px;
    }
    .next {
      background: url(../../../assets/word/next.png) no-repeat;
      background-size: 40px 40px;
    }
    .curl {
      background: url(../../../assets/word/no-next.png) no-repeat;
      background-size: 40px 40px;
    }
    .page {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-left: 40px;
      margin-right: 40px;
    }
  }
  .audio-icon {
    width: 30px;
    height: 24px;
    background: url(../../../assets/word/audio-icon.png) no-repeat;
    background-size: 30px 24px;
    &:hover {
      background-image: url(../../../assets/word/audio-hover.png)
    }
  }
}
.yxp-memory-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 470px;
  background: #fff;
  border-radius: 20px;
  z-index: 1200;
  .paper {
    display: inline-block;
    width: 280px;
    height: 200px;
    margin: 50px auto 30px;
  }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-left: 40px;
    padding-right: 40px;
  }
  .btn {
    width: 280px;
    height: 50px;
    line-height:50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: #27BFA3;
    border-radius: 100px;
    margin: 28px auto 0;
    cursor: pointer;
  }
}
.word-video-pop {
  position: fixed;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 960px;
  height: 540px;
  background: #fff;
  z-index: 1200;
  &-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background:rgba(98,98,98,1);
    z-index: 1000;
    .close {
      position: absolute;
      right: 20px;
      top: 15px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
  }
  video {
    width: 100%;
    height: auto;
    z-index: 100;
  }
}
</style>
